<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增用户')" />
	<th:block th:include="include :: select2-css" />
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
    <div class="main-content">
        <form id="form-user-add" class="form-horizontal">
        <div class="row">
            <div class="col-sm-9">
                <div class="row">
                    <div class="col-sm-4">
                        <label class="col-sm-11 label">拧紧扭矩：123 kN.m</label>
                        <label class="col-sm-11 label">拧紧扭矩：123 kN.m</label>
                        <label class="col-sm-11 label">拧紧扭矩：123 kN.m</label>

                    </div>
                    <div class="col-sm-4">
                        <label class="col-sm-11 label">拧紧扭矩：123 kN.m</label>
                        <label class="col-sm-11 label">拧紧扭矩：123 kN.m</label>
                        <label class="col-sm-11 label">拧紧扭矩：123 kN.m</label>
                    </div>
                    <div class="col-sm-4 num">
                        <b>0.00<span>kN.m</span></b>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12" id="showChart" style="margin:15px; min-width:400px;height:450px;border:1px solid #9e9e9e "></div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="col-sm-12">
                    <ul class="list-group">
                        <li class="list-group-item">管径：<span class="label label-warning">123 kN.m</span></li>
                        <li class="list-group-item">扣型：<span class="label label-warning">123 kN.m</span></li>
                        <li class="list-group-item">钢级：<span class="label label-warning">123 kN.m</span></li>
                        <li class="list-group-item">壁厚：<span class="label label-warning">123 kN.m</span></li>
                        <li class="list-group-item">管长：<span class="label label-warning">123 kN.m</span></li>
                        <li class="list-group-item">下深：<span class="label label-warning">123 kN.m</span></li>
                    </ul>
                    <div class="col-sm-12">
                        <button type="button" class="col-sm-12 btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>开 始</button>&nbsp;
                    </div>
                </div>

            </div>


        </div>
        </form>
    </div>
      

	<th:block th:include="include :: footer" />
	<th:block th:include="include :: select2-js" />
	<script>
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        function activeLastPointToolip(chart) {
            var points = chart.series[0].points;
            chart.tooltip.refresh(points[points.length -1]);
        }
        var chart = Highcharts.chart('showChart', {
            chart: {
                type: 'spline',
                marginRight: 10,
                events: {
                    load: function () {
                        var series = this.series[0],
                            chart = this;
                        activeLastPointToolip(chart);
                        setInterval(function () {
                            var x = (new Date()).getTime(), // 当前时间
                                y = Math.random();          // 随机值
                            series.addPoint([x, y], true, true);
                            activeLastPointToolip(chart);
                        }, 1000);
                    }
                }
            },
            title: {
                text: ''
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: null
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            series: [{
                name: '随机数据',
                data: (function () {
                    // 生成随机值
                    var data = [],
                        time = (new Date()).getTime(),
                        i;
                    for (i = -19; i <= 0; i += 1) {
                        data.push({
                            x: time + i * 1000,
                            y: Math.random()
                        });
                    }
                    return data;
                }())
            }]
        });
    </script>
</body>
</html>